<template>
  <div>
 <div class="container">
    <div class="content">
      <div class="title">截止{{covNum.modifyTime |time}}全国数据统计</div>
      <ul class="wrap">
        <li class="item">
          <div class="number">
            <span>较昨日</span>
            {{covNum.currentConfirmedIncr |number}}
            <div class="bold">{{covNum.currentConfirmedCount |division}}</div>
            <strong>现存确诊</strong>
          </div>
        </li>
        <li class="item">
          <div class="number">
            <span>较昨日</span>
            {{covNum.suspectedIncr |number}}
            <div class="bold">{{covNum.suspectedCount |division}}</div>
            <strong>境外输入</strong>
          </div>
        </li>
        <li class="item">
          <div class="number">
            <span>较昨日</span>
            {{covNum.seriousIncr |number}}
            <div class="bold"> {{covNum.seriousCount |division}}</div>
            <strong>现存无症状</strong>
          </div>
        </li>
        <li class="item">
          <div class="number">
            <span>较昨日</span>
            {{covNum.confirmedIncr |number}}
            <div class="bold">{{covNum.confirmedCount |division}}</div>
            <strong>累计确诊</strong>
          </div>
        </li>
        <li class="item">
          <div class="number">
            <span>较昨日</span>
            {{covNum.deadIncr |number}}
            <div class="bold">{{covNum.deadCount |division}}</div>
            <strong>累计死亡</strong>
          </div>
        </li>
        <li class="item">
          <div class="number">
            <span>较昨日</span>
            {{covNum.curedIncr |number}}
            <div class="bold">{{covNum.curedCount |division}}</div>
            <strong>累计治愈</strong>
          </div>
        </li>
      </ul>
    </div>
 </div>
  </div>
</template>

<script>
  export default {
    props:['covNum'],
    // 定义过滤器
    filters:{
      // 时间过滤器
      time:function(time){
        return new Date().toLocaleString("chinese",{hour12:false});
      },
      // 数值过滤器
      number:function(num){
        if(num>0){
          num="+"+num

        }else if(num<0||num==0){
          num=num;
        }else if(num==undefined){
          num="数据还未更新"
        }
      return num;
      },
      // 千位数字分割
      division:function(number){
        if(number>999){
          return number.toLocaleString();
        }
        else{
          return number
        }

      }
    }
  };
</script>

<style scoped>
.container{
  padding-top: 30px;
  background-color: #f5f5f5;
}
.content{
  background-color: white;
  padding: 15px;
  color: #666;
}
.title{
  font-size: large;
}
.wrap{
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  margin-top: 6px;
  box-shadow: 0 0  2px 2px #e7dbdb;
  border-radius: 4px;

}
.item{
  margin-top: 20px;
  width: 33.33%;
  list-style: none;
  margin-bottom: 10px;
  position: relative;
}
.item::after{
  content: "";
  display: block;
  height: 100%;
  border-right:2px solid #dddddd;
  position: absolute;
  right: 40px;
  top: 0px;
}
.number>span {
color: #444;
}
.number>strong {
color: #222;
}
li:nth-child(1){
  color: red;
}
li:nth-child(2){
  color: green;
}li:nth-child(3){
  color:orange;
}li:nth-child(4){
  color: purple;
}li:nth-child(5){
  color:rgb(225, 225, 14);
}li:nth-child(6){
  color: blue;
}
li:nth-child(3)::after{
  content: "";
  border-right: 0;
}
li:nth-child(6)::after{
  content: '';
  border-right: 0;
}
.bold{
  font-size: x-large;
  font-weight: 900;
}
</style>
